import { render } from 'katex';
import { Component } from 'react';
import "../codemirror/lib/codemirror.css";
import "../codemirror/mode/css/css.js"
import CodeMirror from '../codemirror/src/codemirror';
import '../codemirror/mode/htmlmixed/htmlmixed.js';
import '../codemirror/mode/xml/xml.js';
import '../codemirror/mode/clike/clike.js';
import '../codemirror/mode/javascript/javascript.js';
import PubSub from 'pubsub-js';
// import `../codemirror/mode/${javascript}/javascript.js`;
export default
class TestCodeMirror extends Component{
  constructor(props){
    super(props);
    this.props =props
    this.state={
      codeString:this.props.value,
      language  :this.props.language,
    }
  }
  
  componentWillUnmount(){

  }

  componentDidMount(){ 
    var mixedMode = {
      name: "htmlmixed",
      scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
                     mode: null},
                    {matches: /(text|application)\/(x-)?vb(a|script)/i,
                     mode: "vbscript"}]
    };


    this.editor = CodeMirror.fromTextArea(document.getElementById(`code${this.props.uid}`), {
      lineNumbers: true,
      // mode: this.state.language,
      mode: "javascript",
      matchBrackets: true,
      showCursorWhenSelecting: true,
      indentUnit: 0,
      extraKeys:{"Ctrl-Space":"autocomplete"},
      value : "lalal"
    });
    this.editor.on("change", 
    ()=>{
      console.log(this.editor);
      this.props.handleChange(this.editor.getValue(),this.props.uid)
    }
  );
    this.editor.on("focus", 
    ()=>{
      
      this.props.onFocus(this.props.uid,this.editor.getValue())
    }
  );
    document.getElementById(`code${this.props.uid}`).focus()
  }

  handleValueChange(event){
    this.setState({codeString:event.target.value});
  }


  render(){
    return(
      <>
      <textarea id = {`code${this.props.uid}`}  value={this.state.codeString} onFocus={this.onFocus}></textarea>
      </>
    );
  }

}

